<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jq-1.12.4.js"></script>

</head>

<body>
    <div id="app"></div>
</body>
<script>
    //使用$.get()请求数据
    $(function () {
        let url = "https://web17.oss-cn-hangzhou.aliyuncs.com/netEasy.json?username=tom&password=123456"
        //$.ajaxSettings.async = false
        //发起get请求
        $.get(url, function (res) {
            //若果res.showapi_res_body.pagebean.contentlist是空 arr=[]
            let arr = res.showapi_res_body.pagebean.contentlist || []
            console.log(arr)
            appendEl(arr)
        })
        //$.ajaxSettings.async = true

        //拼接元素是函数
        function appendEl(arr) {
            if (!arr || arr.length === 0) {
                return
            }
            let table = $(`<table border='1' cellpadding="0" cellspacing='0'></table>`)
            table.append(`<tr>
      <th>tid</th>
      <th width='15%'>ctime</th>
      <th width='30%'>intro</th>
      <th width='20%'>title</th>
      <th width='10%'>tname</th>
      <th >url</th>
      </tr>`)
            arr.forEach(function (item, index) {
                table.append(`<tr>
      <td>${item.tid}</td>
      <td>${item.ctime}</td>
      <td>${item.intro}</td>
      <td>${item.title}</td>
      <td>${item.tname}</td>
      <td><a href='${item.url}'>${item.media_name}</a></td>
      </tr>`)
            })
            $(".app").append(table)
        }
    })
</script>

</html>